<template>
   <div>
    <el-input v-model="info.Name" style="width: 240px" placeholder="用户姓名" />


    <el-button type="primary" :icon="Search" @click="xiansh">查询</el-button>
   </div>

    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column fixed prop="UserId" label="编号" width="150" />
      <el-table-column prop="UserName" label="用户名称" width="120" />
      <el-table-column prop="Sex" label="性别" width="120" />
      <el-table-column prop="Tel" label="电话" width="120" />
      <el-table-column prop="LoginName" label="登录姓名" width="120" />
      <el-table-column prop="LoginPwd" label="登录密码" width="120" >
        <template #default="sole">
          <div>{{'******'}}</div>
        </template>
        </el-table-column>

      <el-table-column prop="LoginErrorNum" label="登录错误次数" width="120" />
      <el-table-column prop="RoleName" label="角色名称" width="180" />
      <el-table-column prop="Status" label="状态" width="120" >
        <template #default="sole">
            <el-tag type="primary" v-if="sole.row.Status==1">启用</el-tag>
    
            <el-tag type="danger" v-if="sole.row.Status==0">禁用</el-tag>
        </template>
        </el-table-column>

      <el-table-column prop="CreateTime" label="创建时间" width="180" >
      <template #default="sole">
            
    <div>{{moment(sole.row.CreateTime).format("YYYY-MM-DD HH:mm:ss")}}</div>
          
        </template>
        </el-table-column>


      <el-table-column fixed="right" label="操作" min-width="220">
        <template #default="sole">
          <el-button type="danger" :icon="Delete" circle @click="Del(sole.row.UserId)"/>
          <el-button link type="info" size="small" @click="fantian(sole.row.UserId)">明细</el-button>
          <el-button link type="success" size="small" @click="Updat(sole.row.UserId)">修改</el-button>

          <el-button link type="primary" v-if="sole.row.Status==0" @click="qiyong(sole.row.UserId,1)">启用</el-button>
          <el-button link type="danger" v-if="sole.row.Status==1" @click="qiyong(sole.row.UserId,0)">禁用</el-button>
        


        </template>




        
      </el-table-column>
    </el-table>

    <table>
        <tr>
            <td>    <el-pagination
      v-model:current-page="info.PageIndex"
      v-model:page-size="info.PageSize"
      :page-sizes="[100, 200, 300, 400]"
      layout="slot,total, sizes"
      :total="info.totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      prev-text="上一页"
      next-text="下一页"

    >

    共{{info.totalCount}}条 每页{{info.PageSize}}条 第{{info.PageIndex}}/{{info.totalPage}}页
    </el-pagination>
</td>
            <td>    <el-pagination
      v-model:current-page="info.PageIndex"
      v-model:page-size="info.PageSize"
      :page-sizes="[100, 200, 300, 400]"
      layout="slot,prev, pager, next"
      :total="info.totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      prev-text="上一页"
      next-text="下一页"
      
    >
    <el-button @click="handleCurrentChange(1)" :disabled="info.PageIndex==1">首页</el-button>
</el-pagination>
</td>
            <td>    <el-pagination
      v-model:current-page="info.PageIndex"
      v-model:page-size="info.PageSize"
      :page-sizes="[100, 200, 300, 400]"
      layout="slot,jumper"
      :total="info.totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      prev-text="上一页"
      next-text="下一页"
    >
    <el-button @click="handleCurrentChange(info.totalPage)" :disabled="info.PageIndex==info.totalPage">尾页</el-button>
</el-pagination></td>
        </tr>
    </table>


    <el-dialog v-model="dialogFormVisible" title="用户信息" width="500">
    <el-form :model="form">

      <el-form-item label="编号" :label-width="formLabelWidth">
        <el-input v-model="form.UserId" autocomplete="off" />
      </el-form-item>

      <el-form-item label="用户" :label-width="formLabelWidth">
        <el-input v-model="form.UserName" autocomplete="off" />
      </el-form-item>

      <el-form-item label="性别" :label-width="formLabelWidth">
        <el-input v-model="form.Sex" autocomplete="off" />
      </el-form-item>

      <el-form-item label="电话" :label-width="formLabelWidth">
        <el-input v-model="form.Tel" autocomplete="off" />
      </el-form-item>

      <el-form-item label="登录姓名" :label-width="formLabelWidth">
        <el-input v-model="form.LoginName" autocomplete="off" />
      </el-form-item>

      <el-form-item label="登录错误次数" :label-width="formLabelWidth">
        <el-input v-model="form.LoginErrorNum" autocomplete="off" />
      </el-form-item>

      <el-form-item label="状态" :label-width="formLabelWidth">
        
        <el-input v-model="form.Status" v-if="form.Status=0?'禁用':'启用'" autocomplete="off" />

        
      </el-form-item>

      <el-form-item label="创建时间" :label-width="formLabelWidth">
        <el-input v-model="form.CreateTime" autocomplete="off" />
      </el-form-item>

      <el-form-item label="授权角色id" :label-width="formLabelWidth">
        <el-input v-model="form.RoleIds" autocomplete="off" />
      </el-form-item>


    </el-form>
    <template #footer>
      <div class="dialog-footer">
        
        <el-button type="primary" @click="dialogFormVisible = false">
          返回
        </el-button>
      </div>
    </template>
  </el-dialog>
    

  </template>
  
  <script lang="ts" setup>
  import axios from 'axios';
  import {ref,reactive,onMounted}from 'vue'
  import { useRouter,useRoute } from 'vue-router';
  import moment from 'moment';
  import { ElMessage, ElMessageBox } from 'element-plus'
  import type { Action } from 'element-plus'
  import {Check,Delete,Edit,Message,Search,Star,} from '@element-plus/icons-vue'
import router from '@/router';
  const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const form = reactive({
  UserId: '',
  UserName: '',
  Sex: '',
  Tel: '',
  LoginName:'',
  LoginErrorNum:'',
  Status: '',
  CreateTime: '',
  RoleIds:[]
})


  let info:any=reactive({
    PageIndex:1,
    PageSize:10,
    Name:'',
    totalCount:0,
    totalPage:0
  }) 
  let tableData:any=ref([])

  const xiansh=()=>{
    console.log(tableData);
    axios.get('/api/RBAC/RBACList',{params:info}).then(res=>{
        console.log(res);
        if(res.data.code==200){
            tableData.value=res.data.data.data
            info.totalCount=res.data.data.totalCount
            info.totalPage=res.data.data.totalPage

        }
        
    })
    
  }




  //单删
  const Del=(Id:any)=>{
    var ss=""
    if(Id==656968152817662){
       ss="管理员"
    }
    else{
      ss="普通员工"

    }
    ElMessageBox.confirm(
    '确定删除该用户信息',
    ''+ss+'',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {

    axios.delete('/api/RBAC/UserInfoDel',{params:{Id:Id}}).then(res=>{
      console.log(res);
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      xiansh()

      
    })

    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除已取消',
      })
    })
}


//启用/禁用
const qiyong=(Id:any,stats:any)=>{
  var ss=""
    if(stats==0){
       ss="禁用"
    }
    else{
      ss="启用"

    }
    ElMessageBox.confirm(
    '确定'+ss+'该用户信息',
    ''+ss+'',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {

    axios.get('/api/RBAC/Stastas',{params:{Id:Id,stat:stats}}).then(res=>{
      console.log(res);
      ElMessage({
        type: 'success',
        message: ''+ss+'成功',
      })
      xiansh()

      
    })

    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: ''+ss+'已取消',
      })
    })

}

//反填
const fantian=(Id:any)=>{
  console.log("Id=",Id);
  dialogFormVisible.value=true
  axios({
    url:'/api/RBAC/Fantian',
    method:'get',
    params:{
      Id:Id
    }
  }).then(res=>{
    console.log("res=",res);
    Object.assign(form,res.data.data)
    
  })

}

//修改
const Updat=(Id:any)=>{
  router.push({
    path:'/RBACFantian',
    query:{
      Id:Id
    }
  })
}


  onMounted(()=>{
    xiansh()
  })

  








  const handleClick = () => {
    console.log('click')
  }


  const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  info.PageSize=val
  xiansh()
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  info.PageIndex=val
  xiansh()
}

</script>

<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
  